<template>
  <div class='page-container'> 旭日图:接口地址:http://62.234.30.177/json/xuritu.json
    请求方式:get;参考:https://madeapie.com/#/example?id=xfjB_t-nlR
    &nbsp;https://blog.csdn.net/jieyucx/article/details/140199116</div>
  <img src="./info/infomation.jpg" mode="scaleToFill" />
  <div ref="echartsEle" style="width: 1000px; height: 800px;"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { getXuRiTuData } from "@/api/student"
/**
 * 数据
 */
const echartsEle = ref();
let chartInstance = null;
const option = {
  series: {
    type: 'sunburst',
    data: null,
    radius: [0, '95%'],
    sort: undefined,
    emphasis: {
      focus: 'ancestor',
    },
    levels: [
      {},
      {
        r0: '15%',
        r: '35%',
        itemStyle: {
          borderWidth: 2,
        },
        label: {
          // rotate: 'tangential'
        },
      },
      {
        r0: '35%',
        r: '70%',
        label: {
          align: 'right',
        },
      },
      {
        r0: '70%',
        r: '72%',
        label: {
          position: 'outside',
          padding: 3,
          silent: false,
        },
        itemStyle: {
          borderWidth: 3,
        },
      },
    ],
  },
};
function getChartData() {
  getXuRiTuData().then(res => {
    option.series.data = transformData(res);
    chartInstance.setOption(option);
  });
}


// 已知数据结构如下:
// [
//   {
//     "topIpc": 1,
//     "count": 126888,
//     "topIpcDesc": "新一代信息技术产业",
//     "secondIpcDesc": "下一代信息网络产业",
//     "secondIpc": 10
//   },
//   {
//     "topIpc": 1,
//     "count": 50811,
//     "topIpcDesc": "新一代信息技术产业",
//     "secondIpcDesc": "电子核心产业",
//     "secondIpc": 11
//   },
//   {
//     "topIpc": 1,
//     "count": 58936,
//     "topIpcDesc": "新一代信息技术产业",
//     "secondIpcDesc": "新兴软件和新型信息技术服务",
//     "secondIpc": 12
//   },

//   {
//     "topIpc": 2,
//     "count": 3850,
//     "topIpcDesc": "高端装备制造产业",
//     "secondIpcDesc": "轨道交通装备产业",
//     "secondIpc": 18
//   },
//   {
//     "topIpc": 3,
//     "count": 3713,
//     "topIpcDesc": "新材料产业",
//     "secondIpcDesc": "先进钢铁材料",
//     "secondIpc": 20
//   },
//   {
//     "topIpc": 3,
//     "count": 16988,
//     "topIpcDesc": "新材料产业",
//     "secondIpcDesc": "先进有色金属材料",
//     "secondIpc": 21
//   },
// ]

// 写一个js函数处理成如下结构
// [{
//   name: "新一代信息技术产业",
//   children: [
//     { name: "轨道交通装备产业", value: 3850 },
//     { name: "电子核心产业", value: 50811 },
//     { name: "新兴软件和新型信息技术服务", value: 58936 }
//   ]
// },
// {
//   name: "高端装备制造产业",
//   children: [
//     { name: "下一代信息网络产业", value: 126888 }
//   ]
// },
// ,
//   {
//     name: "新材料产业",
//     children: [
//       { name: "先进钢铁材料", value: 3713 }
//     { name: "先进有色金属材料", value: 16988 }
//     ]
//   }
// ]

function transformData(data) {
  const result = [];
  const groupedData = {};

  // 遍历原始数据  
  data.forEach(item => {
    // 使用 topIpcDesc 作为 key，来确保我们为每个顶层IPC描述创建一个对象  
    if (!groupedData[item.topIpcDesc]) {
      groupedData[item.topIpcDesc] = {
        name: item.topIpcDesc,
        children: []
      };
      result.push(groupedData[item.topIpcDesc]);
    }

    // 然后在每个顶层IPC描述对应的对象中，添加一个表示第二层IPC描述的对象  
    groupedData[item.topIpcDesc].children.push({
      name: item.secondIpcDesc,
      value: item.count
    });
  });

  return result;
}


// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(async () => {
  chartInstance = echarts.init(echartsEle.value);


});

// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
getChartData();
</script>
<style lang='scss' scoped>
.page-container {}

img {
  width: 80%;
  height: 60%;
}
</style>